<template>
  <div class="my">
    <van-nav-bar
      title="我的"
    />
    <header>
      <div class="my-img">
        <img :src="avatar" alt="" >
      </div>
      <div class="my-name">
        <div>{{userMsg.nickName}}</div>
      </div>
    </header>
    <div class="my-order">
      <!-- <van-cell title="我的订单" is-link value="查看全部" @click="toOrder('a')"/> -->
      <van-grid :column-num="5" :border="false">
        <van-grid-item  @click="toOrder('a')">
          <van-image
            src="https://kaola-haitao.oss.kaolacdn.com/79d56b54-ac24-410e-81cb-ec3861abf2a6_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
          />
          <span>待付款</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('b')">
          <van-image
            src="https://kaola-haitao.oss.kaolacdn.com/908ac13b-f182-4d43-a537-2c3dc62a7d71_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
          />
          <span>待发货</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('c')">
          <van-image
            src="https://kaola-haitao.oss.kaolacdn.com/357bd1a8-5c33-45e8-b667-e95543774d2e_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
          />
          <span>待收货</span>
        </van-grid-item>
        <van-grid-item  @click="toOrder('d')">
          <van-image
            src="https://kaola-haitao.oss.kaolacdn.com/e2dc467f-47f3-4df9-853f-31649873e6da_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
          />
          <span>退款退货</span>
        </van-grid-item>
        <van-grid-item @click="toOrder('e')">
          <van-image
            src="https://kaola-haitao.oss.kaolacdn.com/f29c6d37-aa7e-41ef-81a8-69a754e6f883_100_100.png?x-oss-process=image/resize,w_75,h_0/quality,q_95"
          />
          <span>全部订单</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="my-other discount">
      <van-grid :column-num="3" :border="false">
        <van-grid-item>
           <van-image
             src="https://kaola-haitao.oss.kaolacdn.com/c82eebb9-30c8-46eb-866c-bd040a23849b_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_95"
           />
           <span>优惠券</span>
        </van-grid-item>
        <van-grid-item>
           <van-image
             src="https://kaola-haitao.oss.kaolacdn.com/21043ae9-48f3-44ec-afe6-60d195307fe3_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_95"
           />
           <span>红包</span>
        </van-grid-item>
        <van-grid-item>
           <van-image
             src="https://kaola-haitao.oss.kaolacdn.com/e442c5b1-9d78-41ed-99c6-56638712c2f5_88_88.png?x-oss-process=image/resize,w_60,h_0/quality,q_95"
           />
           <span>购物豆</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="my-other setting">
      <van-grid :column-num="4" :border="false">
        <van-grid-item>
          <van-icon name="star-o" />
          <span>收藏</span>
        </van-grid-item>
        <van-grid-item @click="$router.push('/area')">
          <van-icon name="location-o" />
          <span>收货地址</span>
        </van-grid-item>
        <van-grid-item>
          <van-icon name="service-o" />
          <span>客服</span>
        </van-grid-item>
        <van-grid-item>
          <van-icon name="down" />
          <span>app下载</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="my-exit" @click="exit">退出登录</div>
  </div>
</template>
<script>
import Vue from 'vue'
import { getUser } from '@/api/request.js'
import { Cell, CellGroup, Grid, GridItem, NavBar, Image as VanImage, Icon } from 'vant'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)
Vue.use(VanImage)
Vue.use(Icon)
export default {
  data () {
    return {
      userMsg: []
    }
  },
  methods: {
    toOrder (i) {
      sessionStorage.setItem('order', i)
      this.$router.push('order')
    },
    exit () {
      sessionStorage.setItem('token', '')
      sessionStorage.setItem('userId', '')
      sessionStorage.setItem('isLogin', '')
      this.$router.push('/home')
    }
  },
  mounted () {
    getUser({
      userId: sessionStorage.getItem('userId')
    }).then(data => {
      this.userMsg = data.data.msg[0]
    })
  },
  computed: {
    avatar () {
      return this.userMsg.avatar ? this.userMsg.avatar : 'https://kaola-haitao.oss.kaolacdn.com/vtgcByWTZlKwtnRQvhvLT170102401020_150_150.png?x-oss-process=image/resize,w_123,h_0/quality,q_95'
    }
  }
}
</script>
<style lang="scss">
.my{
  .van-nav-bar__content{
    background:#fd424d;
  }
  .van-nav-bar__title{
    font-size: 25px;
    color:white;
    font-family:simhei;
  }
  background: #efefef;
  header{
    background: #fd424d;
    height: 1.3rem;
    display: flex;
    .my-img{
      display: flex;
      align-items: center;
      padding-left: .3rem;
      img{
        width: .85rem;
        height:.85rem;
        border: 2px solid #c8c9cc;
        border-radius: 50%;
      }
    }
    .my-name{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: .35rem;
      div{
        padding-bottom: 0.1rem;
      }
      p{
        font-size:30px;
        font-family: simhei;
        color:white;
      }
    }
  }
  .my-order{
    margin-top: 0.2rem;
    .van-grid{
      .van-grid-item{
        .van-image__img{
          width:60%;
          height:72%;
          padding-left:12px;
          display: inline-block;
          margin-bottom: 0.1rem;
          .van-hairline--bottom::after{
            border-bottom-width:0px;
          }
        }
        span{
          color: #646566;
          font-size: 12px;
        }
      }
    }
    .van-cell{
      padding: 12px 16px;
    }
    .van-cell__title{
      font-weight: 600;
    }
    .van-grid{
      .iconfont{
        .van-grid-item__content{
          height: 43px;
          padding: 19px 8px;
        }
        font-size: 26px;
        text-align: center;
        background: #ffff;
        padding: 15px 0 0 0;
        display: inline-block;
      }
    }
  }
  .setting{
    .van-grid{
      .van-grid-item{
        .van-icon{
          font-size:22px;
        }
        .van-grid-item__content{
          span{
            font-size:12px;
            font-family:simhei;
            margin-top:6px;
            color: #646566;
          }
        }
      }
    }
  }
  .discount{
    .van-grid{
      .van-grid-item{
        .van-image__img{
            display: block;
            width: 28%;
            height: 80%;
            padding-left:33px;
          }
        }
        span{
          color: #646566;
          font-size: 12px;
        }
      }
    }
  }
  .my-other{
    margin-top: 0.2rem;
  }
  .my-exit{
    background: #fff;
    height: 0.5rem;
    line-height: 0.5rem;
    margin-top: 0.2rem;
    text-align: center;
  }

</style>
